<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta content="text/html" charset="utf-8">
    <title></title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        div{
            width:550px;
        }
        span{
            width:100px;
            height:100px;
            display:inline-block;
            text-align:center;
            line-height:100px;
            font-size:50px;
            margin-bottom:10px;
            margin-right:10px;
        }
    </style>
</head>
<body>
    <div>

    </div>
    <input type="text"/>
    <input type="button" value="提交">
</body>
<script type="text/javascript">
    var myContent=document.getElementsByTagName('div');
    var aBtn=document.getElementsByTagName('input');
    var aColor=["red","#ffff00","blue","green","orange"];//创建颜色数组
    aBtn[1].onclick=function(){
        var str='';
        var myText=aBtn[0].value;
        var textArray=myText.split("");//单个字符切割
        for(var i=0;i<textArray.length;i++){
            str+="<span style='background:"+aColor[i%aColor.length]+"'>"+textArray[i]+"</span>";//颜色每5个一次循环
        }
        myContent[0].innerHTML+=str;
        aBtn[0].value='';
    };
</script>
</html>